<template>
	<QSPickerTemplate ref="QSPickerTem" 
		:height="height" 
		:lineHeight="lineHeight" 
		:fontScale="fontScale"
		:buttonSet="buttonSet"
		:title="title"
		:mode="mode"
		:zIndex="zIndex"
		:bgColor_title="bgColor_title"
		:autoHide="autoHide"
		:titleColor="titleColor"
		cusType="plate-keyboard"
		@confirm="confirm">
		
		<view :class="['so-plate animation-scale-up ']" >
			<view class="so-plate-head">
				<view class="so-plate-type">
					<radio-group @change="typeChange">
						<label>
							<radio value="1" :checked="type===1" />
							普通车牌
						</label>
						<label>
							<radio value="2" :checked="type===2" />
							新能源车牌
						</label>
					</radio-group>
					<button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button>
					
				</view>
			</view>
			<view class="so-plate-body">
				<view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch" data-index="0">
					<text>{{ currentInputValue[0] }}</text>
				</view>
				<view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch" data-index="1">
					<text>{{ currentInputValue[1] }}</text>
				</view>
				<view class="so-plate-dot"></view>
				<view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch" data-index="2">
					<text>{{ currentInputValue[2] }}</text>
				</view>
				<view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch" data-index="3">
					<text>{{ currentInputValue[3] }}</text>
				</view>
				<view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch" data-index="4">
					<text>{{ currentInputValue[4] }}</text>
				</view>
				<view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch" data-index="5">
					<text>{{ currentInputValue[5] }}</text>
				</view>
				<view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch" data-index="6">
					<text>{{ currentInputValue[6] }}</text>
				</view>
				<view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch" v-if="type == 2" data-index="7">
					<text>{{ currentInputValue[7] }}</text>
				</view>
			</view>
			<view class="so-plate-foot">
				<view class="so-plate-keyboard"  :style="{height:keyboardHeight}">
					<view id="keyboard">
					<view v-if="inputType == 1" hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
					<block v-if="inputType == 1">
						<text class="so-plate-key fill-block"></text>
						<text class="so-plate-key fill-block"></text>
					</block>
					<view v-if="inputType >= 3" hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
					<view v-if="inputType >= 2" hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
					<text v-if="inputType == 3" v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>
					<view v-if="inputType == 4" hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
					<text v-if="inputType == 4" class="so-plate-key fill-block"></text>
					</view>
				</view>
				<view class="so-plate-btn-group">
					<view>
						<button class="so-plate-btn so-plate-btn--cancel" @tap="hide()">取消</button>
					</view>
					<view>
						<button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">删除</button>
						<!-- <button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button>
						 -->
					</view>
					
				</view>
			</view>
		</view>
		
		
	</QSPickerTemplate>
</template>

<script>
	import _app from '../../../js/app.js';
	import QSPickerTemplate from './QS-pickerTemplate.vue';
	import QSPicker from '../js/QS-picker.js';
	import QSPickerMixin from '../js/QS-picker-mixin.js';

	export default {
		name: 'QS-picker-date',
		mixins: [QSPickerMixin()],
		components: {
			QSPickerTemplate
		},
		data() {
			return {
				years: [],
				days: [],
				months: QSPicker.num2Array(12),   //start with '1'
				hours: QSPicker.num2Array0(23),   //start with '0'
				ms: QSPicker.num2Array0(59),
				
				
				type: 1, //车牌类型
				currentInputIndex: 2, //当前编辑的输入框
				currentInputValue: ['云', 'A', '', '', '', '', ''],
				fillBlock:[{num:11},{num:12},{num:13},{num:14},{num:15},{num:16}],  //避免:key报错
				keyboardHeightInit:false,
				keyboardHeight:'auto',
				provinceText: [
					'粤',
					'京',
					'冀',
					'沪',
					'津',
					'晋',
					'蒙',
					'辽',
					'吉',
					'黑',
					'苏',
					'浙',
					'皖',
					'闽',
					'赣',
					'鲁',
					'豫',
					'鄂',
					'湘',
					'桂',
					'琼',
					'渝',
					'川',
					'贵',
					'云',
					'藏',
					'陕',
					'甘',
					'青',
					'宁'
				],
				numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
				wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
				lastWordText: ['港', '澳', '学', '领', '警']
			};
		},
		props: {
			plate: {
				type: String
			}
		},
		computed: {
			//输入框类型
			inputType() {
				switch (this.currentInputIndex) {
					case 0:
						return 1;
						break;
					case 1:
						return 2;
						break;
					case 2:
						return 3;
						break;
					case 3:
						return 3;
						break;
					case 4:
						return 3;
						break;
					case 5:
						return 3;
						break;
					case 6:
						return this.type==2 ? 3 :4 ;
						break;
					case 7:
						return 4;
						break;
					default:
						return 1;
						break;
				}
			}
		},
		watch:{
			currentInputIndex:function(n,o){
				if(!this.keyboardHeightInit) return
					this.$nextTick(()=>{
						this.changeKeyboardHeight()
					})
			},
		},
		methods: {
			init() {
				let value = [];
				let setObj = QSPicker.creatDateObj(this.dataSet);
				//date
				let years = [];
				let days = [];
				let defaultDate = setObj.defaultValue;
				years = QSPicker.countYears(setObj.startYear || (new Date().getFullYear() - 5), setObj.endYear || (new Date().getFullYear() +
					5));
				let endYear = years[years.length - 1];
				let defaultYear = defaultDate.getFullYear(),
					defaultMonth = defaultDate.getMonth(),
					defaultDay = defaultDate.getDate(),
					defaultHour = defaultDate.getHours(),
					defaultMinute = defaultDate.getMinutes(),
					defaultSecond = defaultDate.getSeconds();
				let compareY = defaultYear > endYear;
				let year = compareY ? endYear : defaultYear;
				let month = compareY ? 11 : defaultMonth;
				defaultDate[1] = month;
				days = QSPicker.countDays(year, defaultDate).days;
				let dm = setObj.dateMode;
				if (dm >= 1) {
					if (compareY)
						value.push(years.length - 1);
					else
						for (let i = 0; i < years.length; i++) {
							if (year == years[i]) {
								value.push(i);
							}
						}
				}
				if (dm >= 2) value.push(compareY ? 11 : month);
				if (dm >= 3) value.push(compareY ? days : defaultDay - 1);
				if (dm >= 4) value.push(defaultHour);
				if (dm >= 5) value.push(defaultMinute);
				if (dm >= 6) value.push(defaultSecond);
				//date
				this.years = years;
				this.days = days;
				this.setObj = setObj;

				let defaultValue = [...value];
				this.value = value;
				this.defaultValue = defaultValue;
				
				if(this.defaultValue.length == 7){
					this.type=1;
					this.currentInputValue = this.defaultValue.split('');
				}else if(this.defaultValue.length == 8){
					this.type=2;
					this.currentInputValue = this.defaultValue.split('');
				}
			},
			bindChange({
				detail: {
					value
				}
			}) {
				let data = QSPicker.countDays(this.years[value[0]], value);
				this.days = data.days;
				this.value = data.val;
				this.$emit('pickerChange', {value});
			},
			// confirm() {
			// 	const value = this.value;
			// 	const obj = {
			// 		value
			// 	}
			// 	let setObj = this.setObj;
			// 	let data = '';

			// 	obj.data = data;
			// 	this.$emit('confirm', obj);
			// 	if (this.autoHide) this.hide();
			// },
			setData(value){
				
			},
			setDataValue(value){
				//add zjj
				let _this = this;
				if(value.length == 7){
					this.type=1;
					this.currentInputValue = value.split('');
				}else if(value.length == 8){
					this.type=2;
					this.currentInputValue = value.split('');
				}
				_this.exportPlate(value);
			},
			
			//车牌类型切换
			typeChange(e) {
				const {value} = e.detail;
				this.type = parseInt(value)
				this.currentInputIndex = 2
				if(value==1){
					this.currentInputValue = ['云','A','','','','','']
				}else{
					this.currentInputValue = ['云','A','','','','','','']
				}
			},
			inputSwitch(e) {
				const { index } = e.currentTarget.dataset;
				this.currentInputIndex = parseInt(index);
			},
			chooseKey(e) {
				const { value } = e.currentTarget.dataset;
				this.$set(this.currentInputValue, this.currentInputIndex, value);
				if(this.type==1 && this.currentInputIndex<6){
					this.currentInputIndex++
				}
				if(this.type==2 && this.currentInputIndex<7){
					this.currentInputIndex++
				}
			},
			deleteKey(){
					this.$set(this.currentInputValue,this.currentInputIndex,'')
					if(this.currentInputIndex!=0) this.currentInputIndex--
			},
			exportPlate(){
				//参考confirm
				
				const plate = this.currentInputValue.join('')
				let err = false
				if(this.type===1&&plate.length!=7){
					err = true
				}else if(this.type===2&&plate.length!=8){
					err = true
				}
				if(err) {
					_app.showToast('请输入完整的车牌号码');
					return;
				}else{
					const value = this.currentInputValue;
					const obj = {
						value
					}
					let setObj = this.setObj;
					let data = '';
					obj.data = plate;
					this.$emit('confirm', obj);
					if (this.autoHide) this.hide();
				}
			},
			changeKeyboardHeight(){
				const that = this
				const query = uni.createSelectorQuery().in(this);
				query.select('#keyboard').boundingClientRect();
				query.exec(function(res) {
					that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'
					that.keyboardHeightInit = true
				});
			}
			
		},
		mounted() {
			console.log(this.plate);
			const plateKey = this.plate.split('')
			if(plateKey.length===7){
				this.type=1
			}else if(plateKey.length===8){
				this.type=2
			}
			if(plateKey.length===7 || plateKey.length===8){
				this.currentInputValue = plateKey
				this.currentInputIndex = plateKey.length-1
			}
		
			setTimeout(() => {  //在动画结束之后才开始获取
				this.$nextTick(()=>{
					this.changeKeyboardHeight()
				})
			}, 500);
		}
	}
</script>

<style scoped>
	@import url("../css/QS-picker.css");
	@import url("../../../config/css/picker.css");
</style>
<style scoped lang="less">
@import './uni-plate-input';


	.so-plate.show{
		transition-delay: .3s;
		transform: translate(-50%, -50%);
		pointer-events: auto;
		opacity: 1;
	}
	
	.so-plate.hide{
		transform: translate(-50%, -50%);
		opacity: 0;
		pointer-events: none;
		display: none;
	}
</style>